<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>获取图片主题色</title>
	<link rel="stylesheet" type="text/css" href="../../../static/css/aui.min.css"/>
	<link rel="stylesheet" type="text/css" href="../../../lib/swiper/swiper.min.css"/>
	<style type="text/css">
		.swiper-container .swiper-slide{overflow: hidden;}
		.swiper-container .swiper-pagination{width: 100%; text-align: right; padding-right: 20px; position: absolute; bottom: 8px; box-sizing: border-box;}
		.swiper-pagination-bullet{width: 7px; height: 2px; border-radius: 2px; background: #FFF; margin: 0 5px 0 0 !important; opacity: 1; vertical-align: middle;}
		.swiper-pagination-bullet-active{width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 2px solid #FFF;}
		.img{width: 100%; height: -webkit-calc(100vh - 50px); height: calc(100vh - 50px); position: relative;}
		.img::before{content: ''; width: 100vh; height: 100vw; background: rgba(255,255,255,.1); position: absolute; top: 70vw; left: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
		.img::after{content: ''; width: 100vh; height: 100vw; background: rgba(255,255,255,.1); position: absolute; top: 70vw; right: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
		.img img{width: -webkit-calc(100% - 30px); width: calc(100% - 30px); position: absolute; top: 50%; left: 15px; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%);}
		.colors{padding: 5px 10px; background: rgba(255,255,255,.5); border-radius: 30px; position: absolute; top: 10px; left: 10px;}
		.colors span{width: 15px; height: 15px; margin: -1px 3px 0 0; border-radius: 3px; background-color: #000000; display: inline-block; vertical-align: middle;}
		.colors span.border::after{border-color: #000000; border-radius: 6px;}
		.colors i{font-size: 12px; color: #333; font-style: inherit; display: inline-block; vertical-align: middle;}
	</style>
</head>
<body>
	<div class="aui-container" id="app">
		<header class="aui-header">
			<a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
			<div class="aui-header-title">获取图片主题色</div>
		</header>
		<div class="aui-content">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-cloak v-for="item in images">
						<div class="img">
							<img :src="item" alt="" class="image">							
						</div>
						<div class="colors"><span class="border"></span>：<i></i></div>
					</div>					
				</div>
				<div class="swiper-pagination"></div>
			</div>			
		</div>
	</div>
	<script src="../../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../lib/jquery/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../lib/swiper/swiper-2.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../static/js/aui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../lib/rgbaster/rgbaster.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">		
		window.onload = function(){
			apiready();
		}
		apiready = function() {
			var vm = new Vue({
				el: "#app",
				data: {				
					images: [
						'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2950958510,1342528287&fm=26&gp=0.jpg',
						'http://img2.imgtn.bdimg.com/it/u=3252521864,872614242&fm=26&gp=0.jpg',
						'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3898438129,1463014098&fm=26&gp=0.jpg',
						'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3047261617,3148254585&fm=26&gp=0.jpg'
					]
				},
				created: function(){
					var _this = this;
					
				},
				mounted: function() {
					var _this = this;
					_this.initSwiper();
					_this.getImgColor(_this.images[0]);
		        },
		        updated: function () {
		            var _this = this;
		            _this.$nextTick(function () {
		
		            })
		        },
		        methods: {
					//初始化轮播图
					initSwiper(){
						var _this = this;
						var _this = this;
						_this.swiper = $('.swiper-container').swiper({
							loop: false,
							pagination: '.swiper-pagination',
							autoplayDisableOnInteraction: false, //用户滑动后继续开启自动滚动
							observer:true,//修改swiper自己或子元素时，自动初始化swiper
							observeParents:true,//修改swiper的父元素时，自动初始化swiper
							slidesPerView: "auto",
							centeredSlides: !0,
							watchSlidesProgress: !0,
							paginationClickable: !0,
							spaceBetween: 0,
							resistanceRatio : 0,
							touchMoveStopPropagation : false,
							onTransitionEnd:function(swiper){
								// console.log(swiper.activeIndex);
								_this.getImgColor(_this.images[swiper.activeIndex]);
							}								
						});
					},
					// rgb背景色转十六进制#xxxxxx;
					getHexBgColor(bg){
						var str = [];
						var rgb = bg.split('(');
						for(var k = 0; k < 3; k++)
						{
							str[k] = parseInt(rgb[1].split(',')[k]).toString(16);
						}
						str = '#' + str[0] + str[1] + str[2];
						return str;
					},
					//获取图片主题色
					getImgColor(_img){
						var _this = this;
						var img = _img;
						RGBaster.colors(img, {
							paletteSize: 10,  //调色板大小（可选项）
							exclude: ['rgb(0,0,0)', 'rgb(255,255,255)' ,'rgb(254,254,254)' ],//剔除的颜色
							success: function(payload) {
								// payload.dominant是主色，RGB形式表示
								// payload.secondary是次色，RGB形式表示
								// payload.palette是调色板，含多个主要颜色，数组
								// console.log(payload.dominant);
								// console.log(payload.secondary);
								// console.log(payload.palette);
								$(".aui-content .img").css({background: payload.dominant});								
								$(".colors span").css({background: payload.dominant});
								$(".colors i").text(payload.dominant +' | ' + _this.getHexBgColor(payload.dominant));
							}
						});
					},
		        }
			});
		}
	</script>
</body>
</html>